// 从 @vueuse/core 库中导入 useIntersectionObserver 函数
// useIntersectionObserver 是一个用于创建交叉观察器的工具函数，可检测元素是否进入视口
import { useIntersectionObserver } from "@vueuse/core";

/**
 * 定义一个用于实现图片懒加载的插件
 * 该插件可在 Vue 应用中使用，通过自定义指令实现图片的懒加载功能
 */
export const lazyPlugin = {
    /**
     * 插件安装方法，在调用 app.use(lazyPlugin) 时会执行此方法
     * @param {Object} app - Vue 应用实例，通过它可以注册全局组件、指令等
     */
    install(app) {
        // 注册一个名为 "img-lazy" 的自定义指令到 Vue 应用中
        // 此指令用于处理图片的懒加载逻辑
        app.directive("img-lazy", {
            /**
             * 指令的 mounted 钩子函数，当指令绑定的元素被插入到 DOM 中时触发
             * @param {HTMLElement} el - 指令绑定的 DOM 元素，这里通常是 img 标签
             * @param {Object} binding - 包含指令绑定信息的对象
             * @param {any} binding.value - 指令绑定的值，一般为图片的真实 URL
             */
            mounted(el, binding) {
                // 打印出指令绑定的元素（img 标签）以及绑定的值（图片的真实 URL）
                // 用于调试，方便查看绑定的元素和值是否正确
                console.log("元素el（img）及其绑定的值", el, binding.value);

                // 使用 useIntersectionObserver 函数来观察元素
                // 该函数返回一个对象，其中包含一个 stop 方法用于停止观察
                const { stop } = useIntersectionObserver(
                    el,
                    // 回调函数，当观察的元素与视口的相交状态发生变化时调用
                    // 接收一个包含多个 IntersectionObserverEntry 对象的数组
                    // 这里只取第一个对象的 isIntersecting 属性，判断元素是否进入视口
                    ([{ isIntersecting }]) => {
                        // 打印出元素是否进入视口的布尔值
                        // 用于调试，查看元素的相交状态
                        console.log(isIntersecting);

                        // 如果元素进入了视口
                        if (isIntersecting) {
                            // 将 img 元素的 src 属性设置为绑定的值（图片的真实 URL）
                            // 从而实现图片的加载
                            el.src = binding.value;

                            // 调用 stop 方法停止对该元素的观察
                            // 避免后续不必要的观察操作，节省性能
                            stop();
                        }
                    }
                );
            }
        });
    }
};